<template>
    <div class="root">
      <video autoplay muted loop class="background-video">
        <source src="/images/shipin.mp4" type="video/mp4">
        Your browser does not support the video tag.
      </video>
      <div class="dengLu">
            <h1 style="margin-bottom: 20px;color: pink;margin-left: 60px;font-size: 50px;text-shadow: 4px 4px 4px #000000;">桥 上 听 风</h1>
            用户账号: <el-input v-model="inputU" placeholder="请输入内容" style="width: 300px;margin-bottom: 20px"></el-input><br>
            用户密码: <el-input placeholder="请输入密码" v-model="inputP" show-password style="margin-bottom: 20px;width: 300px"></el-input><br>
            <el-button type="primary" @click="dengLu()" style="margin-left: 295px">登录</el-button>
        <!-- 错误信息显示部分 -->
        <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
      </div>
    </div>
</template>

<script>
    import * as THREE from "three";
    // import BIRDS from "vanta/src/vanta.birds";

    export default {
        name: "Login",
        data() {
            return {
                inputU:'',
                inputP:'',
              errorMessage:''
            };
        },
        methods:{
            //登录操作事件
            dengLu() {

                    this.axios.post('/denglu',{
                      userAccount:this.inputU,
                        password:this.inputP
                    }).then((res) => {
                      console.log(res.data.code);
                      if (res.data.code === 200) {
                        this.$router.push('/user');
                      } else {
                        // 将错误信息赋值给errorMessage
                        this.errorMessage = '账号或密码错误'; // 你可以根据后端返回的具体错误信息来设置这里的值
                      }
                    }).catch((error) => {
                      // 捕获请求过程中的错误，如网络错误等
                      if (error.response) {
                        // 服务器已响应，但返回了错误的状态码
                        // 你可以从error.response.data中获取更具体的错误信息
                        this.errorMessage = error.response.data.message || '服务器错误';
                      } else if (error.request) {
                        // 请求已发出，但没有收到响应
                        this.errorMessage = '请求已发送，但没有收到响应';
                      } else {
                        // 设置请求时触发的错误
                        this.errorMessage = '设置请求时发生了错误';
                      }
                    });
            },
        },
    }
</script>

<style scoped>
    .root {
      position: relative;
      width: 100%;
      height: 100vh; /* 或者你需要的任何高度 */
      overflow: hidden;
      text-align: center;

    }
    .dengLu {
      position: relative;
      padding-top: 250px;
      color: black;

    }
    .background-video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; /* 保持视频宽高比并覆盖整个容器 */
      z-index: -1; /* 确保视频在内容之下 */
    }
    .error-message {
      color: red; /* 或者你喜欢的任何颜色 */
    }
</style>